<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.chaxun{display: -webkit-flex;margin: 10px;align-items: center;}
			#num{height: 21px;margin-left: 5px;margin-right: 5px;}
			.left{float:left;widht:30%;background: pink;margin-left: 10px;}
			.right{float:left;widht:80%;background: red;}
			#ul li{height: 30px;line-height: 30px;color: #fff;cursor: pointer;}
		</style>
	</head>
	<body onselectstart="return false">
		<div class="chaxun">
			<P><label>页数:  </label><input type="number" id="num" ></P>
			<button id="ajaxBtn">查询</button>
		</div>
		<div class="left">
			<ul id="ul"></ul>
		</div>
		<div class="right">
			<img src="" id="img" />
		</div>
		<script type="text/javascript">
			 var Num=0;
			 var allPages;
		   	ajaxBtn.onclick=function(){
		   		var xhr = new XMLHttpRequest();
		   		
		   		xhr.open("GET","https://route.showapi.com/978-2?page="+num.value+"&showapi_appid=45507&showapi_sign=e4556fce58b94da193a7a4b96dc1f87b")
		   		xhr.send();
		   		xhr.onreadystatechange= function(){
		   			if(xhr.readyState===4){
		   				//console.log(xhr.responseText)
		   				//console.log(typeof xhr.responseText)
		   				if(xhr.status>=200&&xhr.status<300){
		   					
		   					var data = JSON.parse(xhr.responseText);
		   					//console.log(typeof data)
		   					List(data);
		   				}
		   			}
		   		}
		   	}
		   	var timer =setInterval(function(){
		   		Num++;
		   		console.log(Num)
		   		var xhr = new XMLHttpRequest();
		   		xhr.open("GET","https://route.showapi.com/978-2?page="+Num+"&showapi_appid=45507&showapi_sign=e4556fce58b94da193a7a4b96dc1f87b");
		   		xhr.send();
		   		xhr.onreadystatechange = function(){
		   			if(this.readyState===4){
		   				if (this.status>=200&&this.status<300) {
		   					var data =JSON.parse(this.responseText);
		   					if (Num==1) {
		   						allPages = Number(data.showapi_res_body.pagebean.allPages);
		   						//console.log("jkjkdkj"+allPages)
		   					}
		   					console.log(allPages)
		   					console.log(Num);
		   					if (Num>=allPages) {
			   					Num = 0;
			   				}
		   					List(data);
		   				}
		   			}
		   		}
		   	},3000)
		   	function List(data){
		   		var contentlist = data.showapi_res_body.pagebean.contentlist;
		   		 ul.innerHTML=" ";
		   		for(var key in contentlist){
		   			var li = document.createElement('li');
		   		    var title = contentlist[key].title;
		   		    var id = contentlist[key].id;
		   		    li.setAttribute("id",id);
		   		    li.innerHTML = title;
		   		    ul.appendChild(li)
		   		}
		   		
		   	}
		   	//事件委托
		   	ul.onclick= function(e){
		   		var THis = e.target;
		   		var xhr = new XMLHttpRequest();
		   		xhr.open('GET','https://route.showapi.com/978-1?id='+THis.getAttribute("id")+'&showapi_appid=45507&showapi_sign=e4556fce58b94da193a7a4b96dc1f87b')
		   		xhr.send();
		   		xhr.onreadystatechange= function(){
		   				if (xhr.readyState===4) {
		   					if (200<=xhr.status<300) {
		   					 //console.log(xhr.responseText)
		   					 var res = JSON.parse(xhr.responseText);
		   					 var imgUrl = res.showapi_res_body.img;
		   					 img.src= imgUrl;
		   				}
		   			}
		   		}
		   	}
		</script>
	</body>
</html>
